<template>
  <div class="background">
    <a-card style="margin-bottom: 10px" class="material-form ">
      <a-form
        :form="form"
        :label-col="{ span: 7 }"
        :wrapper-col="{ span: 17 }"
        @submit="handleSubmit"
      >
        <a-row>
          <a-col
            :sm="8"
            :md="8"
            :lg="6"
          >
            <a-form-item label="辅料编号">
              <a-input
                allow-clear
                placeholder="请输入辅料编号"
                v-model="formContent.code"
              ></a-input>
            </a-form-item>
          </a-col>

          <a-col
            :sm="8"
            :md="8"
            :lg="6"
          >
            <a-form-item label="物料名称">
              <a-input
                allow-clear
                placeholder="请输入物料名称"
                v-model="formContent.name"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col
            :sm="8"
            :md="8"
            :lg="6"
          >
            <a-form-item label="旧编号查询">
              <a-input
                allow-clear
                placeholder="请输入旧编号查询"
                v-model="formContent.oldCode"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col
            :sm="8"
            :md="8"
            :lg="6"
          >
            <a-form-item label="辅料大类">
              <a-select
                style="width: 100%"
                placeholder="请选择辅料大类"
                v-model="formContent.classifyBig"
                @focus="getDictChildList('CLASSIFY_BIG', 'classifyBigList')"
                allow-clear
              >
                <a-select-option
                  :value="item.code"
                  v-for="(item, index) in classifyBigList"
                  :key="index"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

         
          <template v-if="toggleSearchStatus">
            <a-col
            :sm="8"
            :md="8"
            :lg="6"
          >
            <a-form-item label="辅料中类">
              <a-select
                style="width: 100%"
                placeholder="请选择辅料中类"
                v-model="formContent.classifySmall"
                @focus="getDictChildList('CLASSIFY_SMALL', 'classifySmallList')"
                allow-clear
              >
                <a-select-option
                  :value="item.code"
                  v-for="(item, index) in classifySmallList"
                  :key="index"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
            <a-col
              :sm="8"
              :md="8"
              :lg="6"
            >
              <a-form-item label="辅料小类">
                <a-select
                  style="width: 100%"
                  placeholder="请选择辅料小类"
                  v-model="formContent.classifyLittle"
                  @focus="getDictChildList('CLASSIFY_LITTLE', 'classifyLittleList')"
                  allow-clear
                >
                  <a-select-option
                    :value="item.code"
                    v-for="(item, index) in classifyLittleList"
                    :key="index"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col
              :sm="8"
              :md="8"
              :lg="6"
            >
              <a-form-item label="特殊属性">
                <a-select
                  style="width: 100%"
                  placeholder="请选择特殊属性"
                  v-model="formContent.classifyMinimum"
                  @focus="getDictChildList('CLASSIFY_MINIMUM', 'classifyMinimumList')"
                  allow-clear
                >
                  <a-select-option
                    :value="item.code"
                    v-for="(item, index) in classifyMinimumList"
                    :key="index"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col
              :sm="8"
              :md="8"
              :lg="6"
            >
              <a-form-item label="辅料类别">
                <a-select
                  style="width: 100%"
                  placeholder="请选择辅料类别"
                  v-model="formContent.type"
                  @focus="getDictChildList('ACC_TYPE', 'typeList')"
                  allow-clear
                >
                  <a-select-option
                    :value="item.code"
                    v-for="(item, index) in typeList"
                    :key="index"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col
              :sm="8"
              :md="8"
              :lg="6"
            >
              <a-form-item label="上货季">
                <a-select
                  style="width: 100%"
                  placeholder="请选择上货季"
                  v-model="formContent.putGoodsSeason"
                  @focus="getDictChildList('PUT_GOODS_SEASON', 'putGoodsSeasonList')"
                  allow-clear
                >
                  <a-select-option
                    :value="item.code"
                    v-for="(item, index) in putGoodsSeasonList"
                    :key="index"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col
              :sm="8"
              :md="8"
              :lg="6"
            >
              <a-form-item label="材质成份">
                <a-input
                  placeholder="请输入材质成份"
                  v-model="formContent.textureComponent"
                />
              </a-form-item>
            </a-col>
            <a-col
              :sm="8"
              :md="8"
              :lg="6"
            >
              <a-form-item label="拉链布带">
                <a-select
                  style="width: 100%"
                  placeholder="请选择拉链布带"
                  v-model="formContent.zipperClothBag"
                  @focus="getDictChildList('ZIPPER_CLOTH_BAG', 'zipperClothBagList')"
                  allow-clear
                >
                  <a-select-option
                    :value="item.code"
                    v-for="(item, index) in zipperClothBagList"
                    :key="index"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col
              :sm="8"
              :md="8"
              :lg="6"
            >
              <a-form-item label="拉头">
                <a-select
                  style="width: 100%"
                  placeholder="请选择拉头"
                  v-model="formContent.zipperHead"
                  @focus="getDictChildList('ZIPPER_HEAD', 'zipperHead')"
                  allow-clear
                >
                  <a-select-option
                    :value="item.code"
                    v-for="(item, index) in zipperHead"
                    :key="index"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col
              :sm="8"
              :md="8"
              :lg="6"
            >
              <a-form-item label="拉链号型">
                <a-select
                  style="width: 100%"
                  placeholder="请选择拉链号型"
                  v-model="formContent.zipperModel"
                 @focus="getModel"
                  allow-clear
                >
                  <a-select-option
                    :value="item.code"
                    v-for="(item, index) in zipperModelJs"
                    :key="index"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col
              :sm="8"
              :md="8"
              :lg="6"
            >
              <a-form-item label="拉链特殊说明">
                <a-select
                  style="width: 100%"
                  placeholder="请选择拉链特殊说明"
                  v-model="formContent.zipperSpecialExplain"
                 @focus="getDictChildList('ZIPPER_SPECIAL_EXPLAIN', 'zipperSpecialExplain')"
                  allow-clear
                >
                  <a-select-option
                    :value="item.code"
                    v-for="(item, index) in zipperSpecialExplain"
                    :key="index"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col
              :sm="8"
              :md="8"
              :lg="6"
            >
              <a-form-item label="拉链牙齿">
                <a-select
                  style="width: 100%"
                  placeholder="请选择拉链牙齿"
                  v-model="formContent.zipperTooth"
                 @focus="getDictChildList('ZIPPER_TOOTH', 'zipperTooth')"
                  allow-clear
                >
                  <a-select-option
                    :value="item.code"
                    v-for="(item, index) in zipperTooth"
                    :key="index"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </template>
          <a-col
            :sm="8"
            :md="8"
            :lg="8"
            style="margin-left:20px"
          >
            <span style="float: left;overflow: hidden;">
              <a-button
                type="primary"
                html-type="submit"
              >搜索</a-button>
              <a-button
                type="primary"
                style="margin-left: 10px"
                @click="add"
                v-if="auth.includes('acc_list_add')"
              >新建</a-button>
              <a-button
                type="primary"
                style="margin-left: 10px"
                @click="task"
                v-if="auth.includes('acc_list_add')"
              >下载</a-button>
              <a
                @click="handleToggleSearch"
                style="margin-left: 8px"
              >
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
      <!-- <a-col :span="24">
          <a-form
            layout="inline"
            :form="form"
            @submit="handleSubmit"
          >
            <a-form-item label="辅料编号">
              <a-input
                allow-clear
                placeholder="请输入辅料编号"
                v-model="code"
              ></a-input>
            </a-form-item>
            <a-form-item label="物料名称">
              <a-input
                allow-clear
                placeholder="请输入物料名称"
                v-model="name"
              ></a-input>
            </a-form-item>
            <a-form-item label="辅料大类">
              <a-select
                style="width: 100%"
                placeholder="请选择辅料大类"
                v-model="classifyBig"
                @focus="getDictChildList('CLASSIFY_BIG', 'classifyBigList')"
                allow-clear
              >
                <a-select-option
                  :value="item.code"
                  v-for="(item, index) in classifyBigList"
                  :key="index"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="辅料中类">
              <a-select
                style="width: 100%"
                placeholder="请选择辅料中类"
                v-model="classifySmall"
                @focus="getDictChildList('CLASSIFY_SMALL', 'classifySmallList')"
                allow-clear
              >
                <a-select-option
                  :value="item.code"
                  v-for="(item, index) in classifySmallList"
                  :key="index"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
              >搜索</a-button>
              <a-button
                type="primary"
                style="margin-left: 10px"
                @click="add"
                v-if="auth.includes('acc_list_add')"
              >新建</a-button>
            </a-form-item>
          </a-form>
        </a-col> -->

    </a-card>
    <a-card>
      <a-table
        bordered
        :loading="loading"
        :scroll="{x: 1500,y:500}"
        :pagination="pagination"
        :customRow="loadCustomRow"
        :columns="columns"
        :data-source="dataSource"
        @change="handleTableChange"
      >
        <!-- <template
          slot="code"
          slot-scope="txt, record"
        >
          <span
            @dblclick="edit(record)"
            style="color:#1890ff;cursor:pointer"
          >{{record.code}}</span>
        </template> -->
        <template
          slot="status"
          slot-scope="txt, record"
        >
          <span v-if="record.status == 10">草稿</span>
          <span v-else-if="record.status == 20">启用</span>
          <span v-else-if="record.status == 30">停用</span>
          <span v-else>无效</span>
        </template>
        <template
          slot="classifyMinimumList"
          slot-scope="txt, record"
        >
          <span
            v-for="item, index in record.classifyMinimumList"
            :key="index"
          >
            {{item.value}}
          </span>

        </template>
        <template
          slot="img"
          slot-scope="txt, record"
        >
          <div
            v-for="item, index in record.imageList"
            :key="index"
          >
            <img
              :src="item.url"
              :alt="item.url"
              @click="showImg(index,record.imageList)"
              style="width:100px;height:100px;object-fit: contain;cursor:pointer"
              v-if="item.url"
            />
          </div>

        </template>
        <template
          slot="examine"
          slot-scope="txt, record"
        >
          <span v-if="record.examine == 0 || record.examine == 20">未审核</span>
          <span v-else>已审核</span>
        </template>
        <template
          slot="action"
          slot-scope="txt, record"
        >
          <a
            class="mr-10"
            v-if="auth.includes('acc_list_edit')"
            @click="edit(record)"
          >
            编辑
          </a>
          
          <a-popconfirm
            :title="`确定要删除该项吗?`"
            v-if="record.status == 10 && auth.includes('acc_list_delete') && record.examine!=10"
            @confirm="deleteMaterial(record)"
          >
          <a
            class="mr-10"
          >
            删除
          </a>
          </a-popconfirm>
          <a
            class="mr-10"
            @click="doOperation(record, 20)"
            v-if="record.status == 20 && auth.includes('acc_list_operate')"
          >
            停用
          </a>
          <a
            class="mr-10"
            @click="doOperation(record, 10)"
            v-if="record.status == 30 && auth.includes('acc_list_operate')"
          >
            启用
          </a>
          <!-- <a
            class="mr-10"
            @click="doOperation(record, 40)"
            v-if="record.examine == 10 && auth.includes('acc_list_examine')"
          >
            反审核
          </a> -->
          <a
            class="mr-10"
            @click="doOperation(record, 30)"
            v-if="record.examine == 0 && auth.includes('acc_list_examine')"
          >
            审核
          </a>
          <a class="mr-10" @click="toFile(record)">
            附件查看
          </a>
        </template>
      </a-table>
      <!-- <create
        v-if="showAdd"
        :bag="bag"
        @close="close"
      ></create> -->
    </a-card>
    <BigImg
      :visibleImgs="visibleImgs"
      :imgList="imgList"
      :goToIndex="goToIndex"
      @closeBig="closeBig"
    ></BigImg>
    <fileInfo v-if="showFile" :sccode="sccode" @close="close"></fileInfo>

  </div>

</template>

<script>
import create from './create.vue'
import fileInfo from './fileList.vue'

import { getList, getDictChildList, deleteMaterial, operation } from '@api/material/index'
import { postAction } from '@/api/manage'
import BigImg from '@/views/box/components/UserMsg/bigImg'

const columns = [
  {
    title: '辅料编号',
    width: 120,
    // scopedSlots: { customRender: 'code' },
    dataIndex:'code',
    fixed: 'left'
  },
  {
    title: '辅料名称',
    width: 180,
    dataIndex: 'name'
  },
  {
    title: '图片',
    width: 180,
    scopedSlots: { customRender: 'img' }
  },
  {
    title: '辅料大类',
    width: 100,
    dataIndex: 'classifyBigValue'
  },
  {
    title: '辅料中类',
    width: 100,
    dataIndex: 'classifySmallValue'
  },
  {
    title: '辅料小类',
    width: 120,
    dataIndex: 'classifyLittleValue'
  },
  {
    title: '特殊属性',
    width: 200,
    scopedSlots: { customRender: 'classifyMinimumList' }
  },
  {
    title: '辅料类别',
    width: 120,
    dataIndex: 'typeValue'
  },
  {
    title: '底布(带)编号',
    width: 130,
    dataIndex: 'baseClothCode'
  },
  {
    title: '颜色属性',
    width: 120,
    dataIndex: 'colorAttributeValue'
  },
  {
    title: '原辅料编号',
    width: 130,
    dataIndex: 'oldCode'
  },
  {
    title: '价格方案',
    width: 130,
    dataIndex: 'priceProgrammeValue'
  },
  {
    title: '供应类型',
    width: 100,
    dataIndex: 'supplyTypeValue'
  },
  {
    title: '采购单位',
    width: 100,
    dataIndex: 'purchasingUnitValue'
  },
  {
    title: '损耗率',
    width: 100,
    dataIndex: 'wasteRate'
  },
  {
    title: '产品年份',
    width: 100,
    dataIndex: 'productYearValue'
  },
  {
    title: '上货季',
    width: 100,
    dataIndex: 'putGoodsSeasonValue'
  },
  {
    title: '材质成份',
    width: 150,
    dataIndex: 'textureComponent'
  },
  {
    title: '克重',
    width: 80,
    dataIndex: 'gramWeight'
  },
  {
    title: '缩率',
    width: 80,
    dataIndex: 'minification'
  },
  {
    title: '门幅段长',
    width: 100,
    dataIndex: 'widthSegmentLength'
  },
  {
    title: '大货周期',
    width: 100,
    dataIndex: 'bigGoodsCycle'
  },
  {
    title: '快反周期',
    width: 100,
    dataIndex: 'quickBackCycle'
  },
  {
    title: '粘衬温度',
    width: 130,
    dataIndex: 'stickLiningTemperature'
  },
  {
    title: '粘衬时间',
    width: 100,
    dataIndex: 'stickLiningTime'
  },
  {
    title: '粘衬压力',
    width: 100,
    dataIndex: 'stickLiningPressure'
  },
  {
    title: '进口产地',
    width: 100,
    dataIndex: 'placeOfOrigin'
  },
  {
    title: '产品特殊说明',
    width: 300,
    dataIndex: 'specialExplain'
  },
  {
    title: '拉链号型',
    width: 100,
    dataIndex: 'zipperModelValue'
  },
  {
    title: '拉链功能',
    width: 100,
    dataIndex: 'zipperFunctionValue'
  },
  {
    title: '拉头',
    width: 130,
    dataIndex: 'zipperHeadValue'
  },
  {
    title: '拉链牙齿',
    width: 100,
    dataIndex: 'zipperToothValue'
  },
  {
    title: '拉链布带',
    width: 150,
    dataIndex: 'zipperClothBagValue'
  },
  {
    title: '拉链特殊说明',
    width: 180,
    dataIndex: 'zipperSpecialExplainValue'
  },
  {
    title: '状态',
    width: 80,
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '审核状态',
    width: 100,
    scopedSlots: { customRender: 'examine' }
  },
  {
    title: '操作',
    width: 230,
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    fileInfo,
    create,
    BigImg
  },
  data() {
    return {
      urlKey: 'basemgt-material/',
      columns,
      bag: {},
      sccode:'',
      form: this.$form.createForm(this),
      showAdd: false,
      showFile:false,
      visibleImgs: false,
      goToIndex: 0,
      imgList: [],
      account: '',
      groupName: '',
      toggleSearchStatus: false,
      loading: false,
      dataSource: [],
      prevImageUrl: [],
      auth: [],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `共 ${total} 条记录`,
        itemRender: (current, type, originalElement) => {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        }
      },
      classifyBigList: [],
      classifySmallList: [],
      classifyLittleList: [],
      classifyMinimumList: [],
      putGoodsSeasonList: [],
      zipperClothBagList: [],
      typeList:[],
      zipperHead: [],
      zipperModelJs:[],
      zipperSpecialExplain:[],
      zipperTooth:[],
      formContent: {
        classifyBig: undefined,
        classifySmall: undefined,
        code: '',
        name: '',
        oldCode:'',
        type:undefined,
        classifyLittle: undefined,
        classifyMinimum: undefined,
        putGoodsSeason: undefined,
        textureComponent: '',
        zipperClothBag: undefined,
        zipperHead: undefined,
        zipperModel: undefined,
        zipperSpecialExplain:undefined,
        zipperTooth:undefined
      }
    }
  },
  computed: {
    jobNumber() {
      return this.$store.getters.userInfo.workNo || ''
    }
  },
  mounted() {
    this.loadData()
    this.getAuth()
  },

  methods: {
    toFile(record) {
      this.showFile = true
      this.sccode = record.code
    },
    close() {
      this.showFile = false
    },
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus
    },
    loadCustomRow(record, index) {
      return {
        on: {
          dblclick: () => {
            this.$router.push({ path: '/material/add', query: { accId: record.accId } })
          }
        }
      }
    },
    showImg(index, list) {
      this.prevImageUrl = []
      list.map(item => {
        this.prevImageUrl.push(item.url)
      })
      this.imgList = this.prevImageUrl
      this.goToIndex = index
      setTimeout(() => {
        this.visibleImgs = true
      }, 100)
    },
    closeBig(value) {
      this.visibleImgs = value
      setTimeout(() => {
        this.imgList = []
      }, 200)
    },
    handleTableChange(pagination) {
      this.pagination = pagination
      this.loadData()
    },
  
    handleSubmit(e) {
      e.preventDefault()
      this.getList(1)
    },
    add() {
      this.$router.push(`/material/add`)
    },
    edit(record) {
      this.$router.push({ path: '/material/add', query: { accId: record.accId,examine:record.examine } })
    },
    loadData() {
      // this.getDictChildList('CLASSIFY_BIG', 'classifyBigList')
      // this.getDictChildList('CLASSIFY_SMALL', 'classifySmallList')
      this.getList()
    },
    getModel() {
      if (this.formContent.classifySmall) {
        this.classifySmallList.map(item => {
          if (item.code == this.formContent.classifySmall) {
            this.getDictChildList('ZIPPER_MODEL', 'zipperModelJs', item.id)
          }
        })
      }
    },
    async getDictChildList(name, list) {
      const params = {
        name: name
      }
      try {
        const res = await getDictChildList(params)
        if (res.code == 200) {
          this[list] = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取数据字典失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取数据字典失败！')
      }
    },
    task(){
       const params = {
        category: 10,
        type:10,
        filePath:'',
        jobNumber: this.jobNumber
      }
      postAction(`${this.urlKey}excel/task/submit`, params).then(res => {
        if (res.code == 200) {
          this.$message.success('提交下载任务成功！')
        }
      })
    },
    getAuth() {
      const params = {
        pageCode: 'acc_list',
        jobNumber: this.jobNumber
      }
      postAction(`${this.urlKey}account/auth`, params).then(res => {
        if (res.code == 200) {
          this.auth = res.data
        }
      })
    },
    async getList(key) {
      this.loading = true
      const params = this.formContent
      params.current = this.pagination.current
      params.size = this.pagination.pageSize
      if (key) {
        params.current = 1
      }
      try {
        const res = await getList(params)
        if (res.code == 200) {
          this.dataSource = res.data.records
          this.pagination.total = res.data.total
        } else {
          this.$message.warning(res.msg)
        }
      } catch (error) {
        this.$message.warning('获取列表失败！')
      } finally {
        this.loading = false
      }
    },
    async deleteMaterial(record) {
      const res = await deleteMaterial({ accId: record.accId })
      if (res.code == 200) {
        this.$message.success('删除成功！')
        this.loadData()
      } else {
        this.$message.warning(res.msg)
      }
    },
    async doOperation(record, operate) {
      let params = {
        accId: record.accId,
        jobNumber: this.jobNumber,
        operate: operate
      }
      const res = await operation(params)
      if (res.code == 200) {
        this.$message.success('状态更新成功！')
        this.loadData()
      } else {
        this.$message.warning(res.msg)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.background {
  background: transparent;
}

.mr-10 {
  margin-left: 10px;
}
</style>
<style>
.material-form .ant-form-item{
  margin-bottom: 5px!important
}
</style>